import React, {
  Component
} from 'react';
import {
  connect
} from 'react-redux';
import {
  getQrCode,
  meCell,
  status,
  count,
  ladder,
  title,
  searchUrl
} from '../../redux/login.redux'
import util from '../../util'

@connect(
  state => state.hitTheList, {
    getQrCode,
    meCell,
    status,
    count,
    ladder,
    title,
    searchUrl
  }
)
class Index extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isShow: false
    };
  }

  componentDidMount() {
    util.params(this.props.location.search.replace('?', ''))
      .then(data => {
        this.props.status(data)
        this.props.title(data)
        this.props.searchUrl(data)
      })

  }

  goInvita() {
    this.props.history.push('/poster')
  }

  meCellErr() {
    util.success('已经打过榜了！！！')
  }

  goTheCharts() {
    this.props.history.push('/rankingList')
  }

  showActivity() {
    this.setState({
      isShow: !this.state.isShow
    })
  }

  meCell() {
    this.props.meCell(this.props.user)
  }

  render() {
    return (
      <div className="height index-box">
        <div className="activity" onClick={() => this.showActivity()}></div>
        <div className="bottom-box">
          <div className="cell-box">
            <div className="count-box">
              <div className="count">当前<span>{this.props.titOpt.current}</span>票</div>
              <div className="ratio-box">
                <div className="item">
                  <span className="top">100,000</span>
                  <span className="bottom">解锁<br/>app广告</span>
                </div>
                <div className="item">
                  <span className="top">200,000</span>
                  <span className="bottom">解锁<br/>北京大屏</span>
                </div>
                <div className="item">
                  <span className="top">300,000</span>
                  <span className="bottom">解锁<br/>全国大屏</span>
                </div>
                <div className="item last">
                  <span className="top">500,000</span>
                  <span className="bottom">解锁<br/>时代广场大屏</span>
                </div>
                <span className="step" style={{width: this.props.titOpt.rate}}></span>
              </div>
            </div>
          </div>
          <div className="me-cell">
            {
              this.props.isUse ?
              <div className="btn" onClick={() => this.meCell()}></div> :
              <div className="btn btn-false" onClick={() => this.meCellErr()}></div>
            }
            <div className="btn-link-box">
              <div className="btn-yq" onClick={() => this.goInvita()}></div>
              <div className="btn-phb" onClick={() => this.goTheCharts()}></div>
            </div>
          </div>
          <div className="bg-color"></div>
        </div>


        <div
          style={{opacity:  this.state.isShow ? 1 : 0, zIndex: this.state.isShow ? 999 : -1}}
          className="dialog">
            <div className="dialog-body" style={{transform: this.state.isShow ? 'scale(1)' : 'scale(.6)'}}>
              <div className="content">
                <p>兴迷集结，为张艺兴打call，人气解锁各地标志性户外大屏，赢张艺兴新作《一出好戏》首映入场券！</p>
                <p>活动规则：</p>
                <p>•活动时间：2018年7月25日-年8月1日</p>
                <p>•进入“应援主页”为张艺兴打call；生成带  有邀请码的专属海报，分享并邀请好友一同助力，为爱豆积累人气值。</p>
                <p>•爱豆累积10万人气激活智联招聘APP开屏页面，累积50万人气解锁户外广告牌，一路霸屏全世界。活动奖励：截止至活动结束，影响力排名榜前30的粉丝将获得2018年8月xx日张艺兴新作电影《一出好戏》北京首映礼入场券。</p>
                <p>* 本活动最终解释权归智联招聘所有</p>
              </div>
              <span className="close" onClick={() => this.showActivity()}></span>
            </div>
        </div>
			</div>
    )
  }
}

export default Index